<!--
 * @Author: GKN
 * @Date: 2023-07-25 00:25:55
 * @LastEditTime: 2024-03-25 11:32:23
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\App.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <!--
    /**
      *               ii.                                         ;9ABH,
      *              SA391,                                    .r9GG35&G
      *              &#ii13Gh;                               i3X31i;:,rB1
      *              iMs,:,i5895,                         .5G91:,:;:s1:8A
      *               33::::,,;5G5,                     ,58Si,,:::,sHX;iH1
      *                Sr.,:;rs13BBX35hh11511h5Shhh5S3GAXS:.,,::,,1AG3i,GG
      *                .G51S511sr;;iiiishS8G89Shsrrsh59S;.,,,,,..5A85Si,h8
      *               :SB9s:,............................,,,.,,,SASh53h,1G.
      *            .r18S;..,,,,,,,,,,,,,,,,,,,,,,,,,,,,,....,,.1H315199,rX,
      *          ;S89s,..,,,,,,,,,,,,,,,,,,,,,,,....,,.......,,,;r1ShS8,;Xi
      *        i55s:.........,,,,,,,,,,,,,,,,.,,,......,.....,,....r9&5.:X1
      *       59;.....,.     .,,,,,,,,,,,...        .............,..:1;.:&s
      *      s8,..;53S5S3s.   .,,,,,,,.,..      i15S5h1:.........,,,..,,:99
      *      93.:39s:rSGB@A;  ..,,,,.....    .SG3hhh9G&BGi..,,,,,,,,,,,,.,83
      *      G5.G8  9#@@@@@X. .,,,,,,.....  iA9,.S&B###@@Mr...,,,,,,,,..,.;Xh
      *      Gs.X8 S@@@@@@@B:..,,,,,,,,,,. rA1 ,A@@@@@@@@@H:........,,,,,,.iX:
      *     ;9. ,8A#@@@@@@#5,.,,,,,,,,,... 9A. 8@@@@@@@@@@M;    ....,,,,,,,,S8
      *     X3    iS8XAHH8s.,,,,,,,,,,...,..58hH@@@@@@@@@Hs       ...,,,,,,,:Gs
      *    r8,        ,,,...,,,,,,,,,,.....  ,h8XABMMHX3r.          .,,,,,,,.rX:
      *   :9, .    .:,..,:;;;::,.,,,,,..          .,,.               ..,,,,,,.59
      *  .Si      ,:.i8HBMMMMMB&5,....                    .            .,,,,,.sMr
      *  SS       :: h@@@@@@@@@@#; .                     ...  .         ..,,,,iM5
      *  91  .    ;:.,1&@@@@@@MXs.                            .          .,,:,:&S
      *  hS ....  .:;,,,i3MMS1;..,..... .  .     ...                     ..,:,.99
      *  ,8; ..... .,:,..,8Ms:;,,,...                                     .,::.83
      *   s&: ....  .sS553B@@HX3s;,.    .,;13h.                            .:::&1
      *    SXr  .  ...;s3G99XA&X88Shss11155hi.                             ,;:h&,
      *     iH8:  . ..   ,;iiii;,::,,,,,.                                 .;irHA
      *      ,8X5;   .     .......                                       ,;iihS8Gi
      *         1831,                                                 .,;irrrrrs&@
      *           ;5A8r.                                            .:;iiiiirrss1H
      *             :X@H3s.......                                .,:;iii;iiiiirsrh
      *              r#h:;,...,,.. .,,:;;;;;:::,...              .:;;;;;;iiiirrss1
      *             ,M8 ..,....,.....,,::::::,,...         .     .,;;;iiiiiirss11h
      *             8B;.,,,,,,,.,.....          .           ..   .:;;;;iirrsss111h
      *            i@5,:::,,,,,,,,.... .                   . .:::;;;;;irrrss111111
      *            9Bi,:,,,,......                        ..r91;;;;;iirrsss1ss1111
      */
      -->
  
    <div v-if="$route.meta.keepAlive == 1">
      <HeadTop></HeadTop>
      <header1 @show="show"/>
      <div class="adR adWH" v-if="isright"><AD direction="right" type="r" @close="close('right')"/></div>
      <div class="adL adWH" v-if="isleft"><AD direction="left" type="l" @close="close('left')" /></div>
      <router-view v-if="isShow" style="min-height: 700px;"></router-view>
      <Footer></Footer>
    </div>
    <div >
      <div style="position: fixed;bottom: 10px;right: 10px;cursor: pointer;z-index: 999;">
        <el-popover
                placement="top-start"
                title=""
                :width="180"
                trigger="hover"
                content=""
                popper-class="custom-popover"
              >
                <template #reference>
                  <!-- <span>联系客服</span> -->
                  <img src="@/assets/img/kf.png" style="width:50px;height:50px;object-fit: cover;" alt="" />
                </template>
                <div>
                  <div class="flex flex-j-c flex-align" style="flex-direction: column;">
                      <!-- <div style="width:86px;height: 86px;" class="shadow-1 border-r6">
                          <imgView :src="code" />
                      </div> -->
                      <div class="font-title p-t">客服:010-64729159</div>
                  </div>
                </div>
              </el-popover>
      </div>
    </div>
    <router-view v-if="$route.meta.keepAlive ==2"></router-view>
    <div v-if="$route.meta.keepAlive == 3">
      <HeadTop></HeadTop>
      <header2 />
      <router-view></router-view>
      <Footer></Footer>
    </div>
</template>

<script>
import HeadTop from './components/HeadTop.vue'
import header1 from './components/header1.vue';
import header2 from './components/header2.vue';
import Footer from './components/Footer.vue'
import AD from '@/view/components/ad.vue'
import { ElMessage } from 'element-plus'
export default {
  name: 'App',
  components: {
    HeadTop,AD,Footer,ElMessage,header1,header2
  },
  data: function() {
    return {
      isleft:true,
      isright:true,
      isShow:false
    }
  },
  onload(){
    
  },
  methods:{
    show(){
      this.isShow = true
    },
    close(type){
      if(type == 'left'){
        this.isleft = false
      }
      if(type == 'right'){
        this.isright = false
      }
    }
  }
}
</script>

<style lang="less">
*{
  box-sizing: border-box;
}
.custom-popover{
  z-index: 3000 !important;
}
.case-popover{
  z-index: 1000 !important;
}
body,html{
  background: #f6f7f9;
  margin: 0;
  padding: 0;
  --primaryColorRGBA20: #dbdbdb;
  --primaryColorRGBA50: #a6a6a6;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
  padding-top: 175px;
  padding-bottom: 220px;
  background: #f6f7f9;
  position: relative;
}
/* 滚动条优化 start */
::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track{
    background: var(--primaryColorRGBA20);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb{
    background: var(--primaryColorRGBA50);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover{
    background: var(--primaryColor);
}
::-webkit-scrollbar-corner {
    background: var(--primaryColorRGBA80);
}
/* 滚动条优化 end */
// 最宽限制
.max-w{
  max-width: 1310px;
  margin: 0 auto;
}
p { 
    margin: 0;
    padding: 0;
}
.back-fff{
  background: #fff;
}
// 常用白底卡片
.g-card{
  background: #fff;
  border-radius: 6px;
  box-shadow:0 0 10px rgba(5, 5, 5, 0.1);
  width: 100%;
  padding: 20px;
}
.g-card-1{
  background: #f6f7f9;
  border-radius: 6px;
  box-shadow:0 0 10px rgba(5, 5, 5, 0.1);
  width: 100%;
  padding: 20px;
}
// 轮播点
.indicationPoint-1{
    display: flex;
    .item1{
        width: 40px;
        height: 8px;
        border-radius: 20px;
        background: rgba(209, 11, 0,1);
        margin-left: 16px;
    }
    .item2{
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(216, 214, 212,1);
        margin-left: 16px;
    }
}
.shadow-1{
  box-shadow:0 0 10px rgba(5, 5, 5, 0.03);
}
.shadow-2{
  box-shadow:0 0 10px rgba(0, 0, 0, 0.02);
}
.shadow-3{
  box-shadow:0 0 10px rgba(5, 5, 5, 0.1);
}
.shadow-4{
  box-shadow:0 0 5px rgba(5, 5, 5, 0.1);
}
.border-r6{
  border-radius: 6px;
  overflow: hidden;
}
.border-r15{
  border-radius: 15px;
  overflow: hidden;
}
.ad-view{
  height: 200px;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
}

.ad-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cursor-p{
  cursor: pointer;
}
// flex布局样式
.flex{
  display: flex;
}
.flex-d{
  display: flex;
  flex-direction: column;
}
.flex-align {
  display: flex;
  align-items: center;
}
.flex-j-s{
  display: flex;
  justify-content: space-between;
}
.flex-j-c{
  display: flex;
  justify-content: center;
}
.flex-w{
  flex-wrap: wrap;
}
.back-sha-box{
  background: linear-gradient(to bottom, rgba(255, 250, 248, 1), rgba(255, 225, 205, 1));
  box-shadow:0 0 10px rgba(5, 5, 5, 0.1);
  border-radius: 6px;
}
.a-tab{
  .a-tab-p{
    width: 94px;
    padding: 5px 6px;
    background: #e7e7e7;
    border-radius: 30px;
    margin-left: 20px;
    cursor: pointer;
    text-align: center;
    span{
      color: #333;
      font-size: 14px;
    }
  }
  .a-tab-p-active{
    color: #fff;
    background: #d10b00;
    text-align: center;
    span{
      color: #fff;
      text-align: center;
    }
  }
}
.a-tab1{
  .a-tab-p{
    // width: 94px;
    padding: 5px 15px;
    color: #fff;
    // background: #e7e7e7;
    font-size: 14px;
    border-radius: 30px;
    margin-left: 20px;
    cursor: pointer;
  }
  .a-tab-p-active{
    color: #d10b00;
    background: #fff;
  }
}
.a-tab2{
  display: flex;
  height: 60px;
  .navsItem{
    width: 72px;
    height: 60px;
    color: #333333;
    font-size: 16px;
    position: relative;
    line-height: 60px;
    cursor: pointer;
    margin-right: 37px;
    text-align: center;
    .line1{
      width: 100%;
      height: 4px;
      background: #D10B00;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    .line2{
      width: 100%;
      height: 4px;
      background: rgba(0,0,0,0);
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
}
// 页-头部 面包屑字体样式
.font-Breadcrumbs{
  font-size: 14px;
  color:#333;
}
// 列表标题-字体样式
.font-title{
  font-size: 15px;
  font-weight: bold;
  color:#333;
}
.title-16-left{
  font-size: 16px;
  font-weight: bold;
  color:#333;
  text-align: left;
}
.f-title-26{
  font-size: 26px;
  font-weight: bold;
  color:#333;
  text-align: left;
}
.f-desc-14{
  text-align: left;
  font-size: 14px;
  color: #8d8d8d;
  line-height: 23px;
}
// 列表内容-字体样式
.font-content{
  font-size: 12px;
  color: #8d8d8d;
  line-height: 23px;
}
.font-content-18{
  font-size: 18px;
  color: #333;
  line-height: 24px;
  text-align: left;
}
.font-content-14{
  font-size: 14px;
  color: #333;
  line-height: 23px;
  text-align: left;
}
.font-MTop{
  margin-top:16px;
}
.font-MTop12{
  margin-top:12px;
}
.font-text-al-l{
  text-align: left;
}
.omit{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.omit-2{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  text-overflow:ellipsis;
}
.omit-3{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  text-overflow:ellipsis;
}
.omit-4{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  overflow:hidden;
  text-overflow:ellipsis;
}
.omit-5{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:5;
  overflow:hidden;
  text-overflow:ellipsis;
}
.omit-6{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:6;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mainPadding{
    padding-left:300px;
    padding-right:300px;
    
}
.po-re{
  position: relative;
}
.po-ab0{
  position: absolute;
  bottom: 0;left: 0;
  z-index: 4;
}
.po-ab-r-0{
  position: absolute;
  bottom: 0;right: 0;
  z-index: 4;
}
.po-ab-10{
  position: absolute;
  top: 10px;left: 10px;
  z-index: 4;
}
.xf-font{
  color: #fff;
  font-size: 16px;
  text-align: center;
  padding: 12px 12px;
  background: rgba(0,0,0,.3);
  font-weight: bold;
}
.xf-font-small{
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 6px 12px;
  background: rgba(0,0,0,.3);
  font-weight: bold;
}
.t-indent{
  text-indent: 28px;
}
.withFull{
  width:100%;
}
.h-Full{
  height:100%;
}
.h-50{
  height:50%;
}
.min-h{
  min-height: 320px;
}
.min-h-500{
  min-height: 500px;
}
.with50{
  width:50%;
}
.MarT{
  margin-top:20px;
}
.MarT35{
  margin-top:35px;
}
.MarT24{
  margin-top:24px;
}
.MarT20{
  margin-top:20px;
}
.MarT14{
  margin-top:14px;
}
.MarT12{
  margin-top:12px;
}
.MarT10{
  margin-top:10px;
}
.MarT0{
  margin-top:0px;
}
.MarL{
  margin-left:20px;
}
.MarR{
  margin-right:20px;
}
.MarB{
  margin-bottom:20px;
}
.MarB-25{
  margin-bottom:25px;
}
.MarB-30{
  margin-bottom:30px;
}
.MarB-5{
  margin-bottom:5px;
}
.padding-20{
  padding: 20px;
  box-sizing: border-box;
}
.p-t{
  padding-top: 20px;
}
.p-t-10{
  padding-top: 10px;
}
.p-t-30{
  padding-top: 30px;
}
.p-b{
  padding-bottom: 20px;
}
.p-b-30{
  padding-bottom: 30px;
}
.p-l{
  padding-left: 20px;
}
.p-r{
  padding-right: 20px;
}
// 主题方向 红色框
.ztB-red{
  width: 64px;height: 64px;background: #CF0B00;border-radius: 6px 6px 6px 6px;font-size: 18px;line-height:20px;font-weight: bold;color: #fff;padding:0 10px;box-sizing:border-box;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.adR{
  position: fixed;
  top:240px;
  right: 0;
  z-index: 10;
}
.adL{
  position: fixed;
  top:240px;
  left: 0;
  z-index: 10;
}
.adWH{
  width:156px;
  height: 398px;
}
.cardRow{
  .cardCol{
    .card{
      // padding-right: 20px;
      box-sizing: border-box;
    }
    
  }
  .cardCol:last-child{
    .card{
      padding-right: 0;
      box-sizing: border-box;
    }
    
  }
}
.title-icon{
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
// 关于我们-头部标题样式
.title-y1{
  width: 156px;
  height: 41px;
  background: url('@/assets/img/title-tip3.png');
  background-size:100% ;
  display: flex;
  justify-content: center;
  align-items: center;
  
  span{
      font-size: 16px;
      color: #fff;
  }
}
// 按钮样式
.btn-1{
  padding:0 20px;
  height: 40px;
  color: #d10b00;
  background: #fff2f1;
  border:1px solid #d10b00;
  border-radius: 6px;
  line-height: 40px;
  margin: 0 auto;
  text-align: center;
  cursor: pointer;
}
// 提交按钮
.btn-submit{
  width: 236px;
  height: 40px;
  color:#fff;
  background:#d00b00;
  border-radius:30px;
  line-height:40px;
  font-size:20px;
  margin:0 auto;
  text-align: center;
  cursor: pointer;
}
.btn-submit-1{
  width: 280px;
  height: 40px;
  color:#fff;
  background:#d00b00;
  border-radius:30px;
  line-height:40px;
  font-size:20px;
  margin:20px auto;
  text-align: center;
  cursor: pointer;
}
.btn-2{
  height: 30px;
  color:#fff;
  padding: 0 20px;
  background:#d00b00;
  border-radius:30px;
  line-height:30px;
  font-size:16px;
  text-align: center;
  cursor: pointer;
}
// 图片样式
.img_cover{
  width: 100%;
  height: 100%;
  object-fit: cover;

}
.el-input__prefix{
  margin-left:10px;
}
// 查看详情
.more-1{
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #d10b00;
  cursor: pointer;
  img{
      margin-left: 10px;
  }
}
// 广告高度
.adheight{
  height:200px;
}
// 最框
@media screen and (min-width: 1700px) {
/* 在屏幕大于**像素时应用这些样式 */
  .headLogo{
    width: 345px;
    height: 62px;
  }
  .mainPadding{
    padding-left: 300px;
    padding-right:300px;
  }
  .navsItems{
    width: 140px;
  }
  .adWH{
    width:156px;
    height: 398px;
  }
  .adheight{
    height:200px;
  }
}
/* 在屏幕小于**像素时应用这些样式 */
@media screen and (max-width: 1700px) {
  .headLogo{
    width: 258px;
    height: 50px;
  }
  .mainPadding{
    padding-left:186px;
    padding-right:186px;
  }
  .navsItems{
    width: 100px;
  }
  .adWH{
    width:136px;
    height: 378px;
  }
  .adheight{
    height:160px;
  }
}
@media screen and (max-width: 1500px) {
  .adheight{
    height:170px;
  }
  .headLogo{
    width: 248px;
    height: 40px;
  }
  .mainPadding{
    padding-left:100px;
    padding-right:100px;
  }
  .navsItems{
    width: 90px;
  }
  .adWH{
    width:100px;
    height: 290px;
  }
}

</style>
